<template>
  <div class="login-container">
    <!-- 粒子背景 -->
    <div class="particles-background"></div>

    <!-- 渐变背景层 -->
    <div class="gradient-overlay"></div>

    <!-- 动态光效 -->
    <div class="dynamic-light"></div>

    <!-- 顶部背景 -->
    <div class="top-background"></div>

    <!-- 底部背景 -->
    <div class="bottom-background"></div>

    <!-- 装饰性圆形元素 -->
    <div class="decorative-circle circle-1"></div>
    <div class="decorative-circle circle-2"></div>
    <div class="decorative-circle circle-3"></div>

    <!-- 医疗主题装饰图标 -->
    <div class="medical-icons">
      <div class="icon-heart">❤️</div>
      <div class="icon-plus">➕</div>
      <div class="icon-stethoscope">🩺</div>
      <div class="icon-pills">💊</div>
      <div class="icon-syringe">💉</div>
    </div>

    <!-- 标题 -->
    <h1 class="main-title">一体化慢病管理平台</h1>

    <!-- 登录表单容器 -->
    <div class="login-form-container">
      <div class="form-wrapper">
        <h2 class="form-title">登 录</h2>

        <div class="input-group">
          <label for="userName">用户名</label>
          <input id="userName" v-model="loginForm.userName" type="text" placeholder="请输入用户名" class="form-input" />
        </div>

        <div class="input-group">
          <label for="userPass">密码</label>
          <input id="userPass" v-model="loginForm.userPass" type="password" placeholder="请输入密码" class="form-input" />
        </div>

        <div class="form-options">
          <div class="remember-me">
            <input id="remember" type="checkbox" v-model="loginForm.rememberMe" />
            <label for="remember">记住我</label>
          </div>
          <a href="#" class="forgot-password">忘记密码</a>
        </div>

        <button @click="handleLogin" class="login-button">登 录</button>

        <!-- <div class="agreement">
          <input id="agree"  type="checkbox" />
          <label for="agree">
            同意<span class="agreement-link">《隐私协议》</span>
          </label>
        </div> -->
      </div>
    </div>
    <!-- 注册链接 -->
    <div class="register-link">
      <span>还没有账号？</span>
      <a href="#" @click="showRegister">注册</a>
    </div>

    <!-- 底部信息 -->
    <div class="footer-info">
      <p>XX公司版权所有</p>
      <p>京ICP备12301-1001</p>
    </div>

    <!-- 注册表单 -->
    <div v-if="showRegistration" class="register-overlay" @click="hideRegister">
      <div class="register-form-container" @click.stop>
        <div class="register-form">
          <div class="register-header">
            <h2 class="register-title">企业注册</h2>
            <p class="register-subtitle">填写企业信息完成注册</p>
          </div>

          <div class="register-inputs">
            <div class="input-row">
              <div class="input-group">
                <label for="companyName">企业名称</label>
                <input id="companyName" type="text" class="form-input" placeholder="请输入企业名称"
                  v-model="from.enterprieName">
              </div>
              <div class="input-group">
                <label for="creditCode">统一社会信用代码</label>
                <input id="creditCode" type="text" class="form-input" placeholder="请输入18位信用代码"
                  v-model="from.creditCode">
              </div>
            </div>

            <div class="input-row">
              <div class="input-group">
                <label for="phone">手机号</label>
                <input id="phone" type="tel" class="form-input" placeholder="请输入手机号" v-model="from.userPhone">
              </div>
              <div class="input-group">
                <label for="userName">用户名</label>
                <input id="userName" type="text" class="form-input" placeholder="请输入用户名" v-model="from.userName">
              </div>
            </div>

            <div class="input-row">
              <div class="input-group">
                <label for="password">密码</label>
                <input id="password" type="password" class="form-input" placeholder="请输入密码" v-model="from.userPass">
              </div>
              <div class="input-group">
                <label for="confirmPassword">确认密码</label>
                <input id="confirmPassword" type="password" class="form-input" placeholder="请再次输入密码"
                  v-model="from.confirmPassword">
              </div>
            </div>

            <div class="input-row">
              <div class="input-group">
                <label for="userNickname">用户昵称</label>
                <input id="userNickname" type="text" class="form-input" placeholder="请输入用户昵称"
                  v-model="from.userNickname">
              </div>
            </div>
          </div>

          <div class="register-agreement">
            <input type="checkbox" id="agreement" v-model="from.agreed">
            <label for="agreement">我已阅读并同意《用户协议》和《隐私政策》</label>
          </div>

          <div class="register-buttons">
            <button class="cancel-button" @click="hideRegister">取消</button>
            <button class="submit-button" @click="zhuce" :disabled="registerLoading">
              <span v-if="registerLoading">注册中...</span>
              <span v-else>注册</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import router from '@/router'
import { Read,Write } from '@/Http/Axios'
// 登录表单数据
const loginForm = reactive({
  userName: '',
  userPass: '',
  rememberMe: false
})

const from = reactive({
  "userId": 0,
  "userName": "",
  "userPass": "",
  "userNickname": "",
  "userPhone": "",
  "enterprieName": "",
  "creditCode": "",
  "confirmPassword": "",
  "agreed": false
})

// 注册按钮加载状态
const registerLoading = ref(false)

// 是否显示注册表单
const showRegistration = ref(false)

// 保存登录信息到本地存储
const saveLoginInfo = () => {
  if (loginForm.rememberMe) {
    localStorage.setItem('savedLoginInfo', JSON.stringify({
      userName: loginForm.userName,
      userPass: loginForm.userPass,
      rememberMe: true
    }))
  } else {
    localStorage.removeItem('savedLoginInfo')
  }
}

// 从本地存储加载登录信息
const loadSavedLoginInfo = () => {
  const savedInfo = localStorage.getItem('savedLoginInfo')
  if (savedInfo) {
    const parsedInfo = JSON.parse(savedInfo)
    loginForm.userName = parsedInfo.userName || ''
    loginForm.userPass = parsedInfo.userPass || ''
    loginForm.rememberMe = parsedInfo.rememberMe || false
  }
}

// 处理登录
const handleLogin = () => {
  // if (!loginForm.value.agree) {
  //   ElMessage.error('请先同意隐私协议')
  //   return
  // }

  // 保存登录信息
  saveLoginInfo()

  axios.post('http://localhost:5108/api/Manager/Login', loginForm).then(res => {
    if (res.data.code == 1) {
      ElMessage.success('登录成功')
      router.push('/IndexView')
    } else {
      ElMessage.error(res.data.msg);
    }
  })

  //  console.log('登录信息:', loginForm.value)

  //  // 这里可以添加实际的登录逻辑
  //  ElMessage.success(`欢迎, ${loginForm.value.userName}!`)

}
// 表单验证方法
const validateForm = () => {
  const errors = []

  // 必填字段验证
  if (!from.enterprieName?.trim()) {
    errors.push('请输入企业名称')
  }

  if (!from.creditCode?.trim()) {
    errors.push('请输入统一社会信用代码')
  } else if (from.creditCode.length !== 18) {
    errors.push('统一社会信用代码必须为18位')
  }

  if (!from.userPhone?.trim()) {
    errors.push('请输入手机号')
  } else if (!/^1[3-9]\d{9}$/.test(from.userPhone)) {
    errors.push('请输入正确的手机号格式')
  }

  if (!from.userPass?.trim()) {
    errors.push('请输入密码')
  } else if (from.userPass.length < 6) {
    errors.push('密码长度不能少于6位')
  }

  // 确认密码验证
  if (!from.confirmPassword?.trim()) {
    errors.push('请确认密码')
  } else if (from.userPass !== from.confirmPassword) {
    errors.push('两次输入的密码不一致')
  }

  // 用户昵称验证
  if (!from.userNickname?.trim()) {
    errors.push('请输入用户昵称')
  }

  // 协议验证
  if (!from.agreed) {
    errors.push('请同意用户协议和隐私政策')
  }

  return errors
}

//注册
const zhuce = () => {
  const errors = validateForm()

  if (errors.length > 0) {
    ElMessage.error(errors.join('\n'))
    return
  }

  registerLoading.value = true

  axios.post('http://localhost:5203/api/Managment/Register', from).then(res => {
    registerLoading.value = false
    if (res.data.code == 1) {
      ElMessage.success('注册成功！请登录')
      hideRegister()
      // 清空表单
      Object.keys(from).forEach(key => {
        // from[key] = ''
      })
      from.agreed = false
    } else {
      ElMessage.error("注册失败");
    }
  }).catch(error => {
    registerLoading.value = false
    ElMessage.error('网络错误，请稍后重试')
    console.error('注册请求失败:', error)
  })
}

// 显示注册表单
const showRegister = () => {
  showRegistration.value = true
}

// 隐藏注册表单
const hideRegister = () => {
  showRegistration.value = false
}

// 页面加载时自动填充保存的登录信息
onMounted(() => {
  loadSavedLoginInfo()
})
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }

  50% {
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  }

  100% {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  }
}

/* 医疗主题粒子背景 */
.particles-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.15) 0.5px, transparent 1px),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0.5px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.15) 0.5px, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.15) 0.5px, transparent 1px),
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.15) 0.5px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 100px 100px, 60px 60px, 180px 180px;
  animation: particlesMove 20s linear infinite;
}

@keyframes particlesMove {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 80px 80px, 120px 120px, 100px 100px, 60px 60px, 180px 180px;
  }
}

/* 医疗主题渐变覆盖层 */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: linear-gradient(45deg,
      rgba(79, 172, 254, 0.1) 0%,
      rgba(0, 242, 254, 0.1) 25%,
      rgba(103, 237, 213, 0.1) 50%,
      rgba(123, 226, 247, 0.1) 75%,
      rgba(79, 172, 254, 0.1) 100%);
  animation: gradientShift 10s ease infinite;
}

@keyframes gradientShift {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.4;
  }

  100% {
    opacity: 0.2;
  }
}

/* 医疗主题动态光效 */
.dynamic-light {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  animation: lightSweep 15s linear infinite;
  opacity: 0.3;
}

@keyframes lightSweep {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 医疗主题装饰图标 */
.medical-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.icon-heart,
.icon-plus,
.icon-stethoscope,
.icon-pills,
.icon-syringe {
  position: absolute;
  font-size: 24px;
  opacity: 0.7;
  animation: iconFloat 8s ease-in-out infinite;
}

.icon-heart {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.icon-plus {
  top: 30%;
  right: 15%;
  animation-delay: 1s;
}

.icon-stethoscope {
  bottom: 30%;
  left: 20%;
  animation-delay: 2s;
}

.icon-pills {
  bottom: 25%;
  right: 25%;
  animation-delay: 3s;
}

.icon-syringe {
  top: 40%;
  left: 30%;
  animation-delay: 4s;
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-15px) rotate(5deg);
  }

  50% {
    transform: translateY(10px) rotate(-5deg);
  }

  75% {
    transform: translateY(-10px) rotate(3deg);
  }
}

/* 医疗主题注册表单装饰性元素 */
.register-decoration {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 1;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  animation: float 6s ease-in-out infinite;
}

.circle-1 {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  top: 0;
  left: 0;
  animation-delay: 0s;
}

.circle-2 {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #00f2fe, #67edd5);
  bottom: 10px;
  right: 10px;
  animation-delay: 2s;
}

.circle-3 {
  width: 25px;
  height: 25px;
  background: linear-gradient(135deg, #67edd5, #4facfe);
  bottom: 0;
  left: 30px;
  animation-delay: 4s;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-20px) translateX(10px);
  }

  100% {
    transform: translateY(0) translateX(0);
  }
}

/* 新增医疗主题波浪装饰 */
.medical-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  z-index: 0;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 80px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(79, 172, 254, 0.1)"/></svg>');
  background-size: 50% 100%;
  opacity: 0.6;
}

.wave-1 {
  animation: wave-animation 15s linear infinite;
  opacity: 0.3;
  background-position-x: 0;
}

.wave-2 {
  animation: wave-animation 18s linear infinite;
  opacity: 0.5;
  background-position-x: 25%;
  animation-direction: reverse;
}

.wave-3 {
  animation: wave-animation 20s linear infinite;
  opacity: 0.7;
  background-position-x: 75%;
}

@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 医疗主题装饰性元素 */
.decorative-circle {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.15;
}

.circle-1 {
  top: 10%;
  left: 5%;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  animation: float 8s ease-in-out infinite;
}

.circle-2 {
  bottom: 15%;
  right: 10%;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #00f2fe, #67edd5);
  animation: float 10s ease-in-out infinite reverse;
}

.circle-3 {
  top: 40%;
  right: 20%;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #67edd5, #7be2f7);
  animation: float 12s ease-in-out infinite;
}

.top-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 450px;
  background: linear-gradient(120deg, #a1e3ff 0%, #c2f9ff 100%);
  z-index: -1;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
}

.bottom-background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 450px;
  background: linear-gradient(120deg, #7be2f7 0%, #a1e3ff 100%);
  z-index: -1;
  opacity: 0.6;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.main-title {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
  margin-top: 60px;
  margin-bottom: 40px;
  position: relative;
  letter-spacing: 1px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
  }

  50% {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.3);
  }

  100% {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
  }
}

.main-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 5px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  margin: 15px auto 0;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.login-form-container {
  width: 480px;
  height: 580px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  position: relative;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: slideUp 0.8s ease-out;
}

.login-form-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.form-wrapper {
  padding: 45px 55px;
}

.form-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 35px;
  position: relative;
  letter-spacing: 1px;
}

.form-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  margin: 12px auto 0;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 28px;
  position: relative;
}

.input-group label {
  display: block;
  font-size: 16px;
  color: #444;
  margin-bottom: 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.input-group:focus-within label {
  color: #4facfe;
  transform: translateY(-2px);
}

.form-input {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border: 2px solid #e1f5fe;
  border-radius: 12px;
  font-size: 16px;
  box-sizing: border-box;
  transition: all 0.4s ease;
  background-color: #f8fdff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.form-input:focus {
  outline: none;
  border-color: #4facfe;
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.2), inset 0 2px 6px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  transform: scale(1.02);
}

.form-input::placeholder {
  color: #888;
  transition: all 0.3s ease;
}

.form-input:focus::placeholder {
  color: #aaa;
  transform: translateX(5px);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}

.remember-me {
  display: flex;
  align-items: center;
}

.remember-me input {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  accent-color: #4facfe;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.remember-me input:hover {
  transform: scale(1.1);
}

.remember-me label,
.forgot-password {
  font-size: 15px;
  color: #555;
}

.forgot-password {
  text-decoration: none;
  color: #4facfe;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.forgot-password:hover {
  color: #00b4d8;
  text-decoration: none;
}

.forgot-password::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  transition: width 0.3s ease;
}

.forgot-password:hover::after {
  width: 100%;
}

.login-button {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.3);
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.5s;
}

.login-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}

.login-button:hover::before {
  left: 100%;
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement input {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  accent-color: #4facfe;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.agreement input:hover {
  transform: scale(1.1);
}

.agreement-link {
  color: #4facfe;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.agreement-link:hover {
  color: #00b4d8;
  text-decoration: none;
}

.agreement-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  transition: width 0.3s ease;
}

.agreement-link:hover::after {
  width: 100%;
}

.register-link {
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
  color: #555;
}

.register-link a {
  color: #4facfe;
  text-decoration: none;
  margin-left: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.register-link a:hover {
  color: #00b4d8;
  text-decoration: none;
}

.register-link a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #4facfe, #00f2fe);
  transition: width 0.3s ease;
}

.register-link a:hover::after {
  width: 100%;
}

.footer-info {
  position: absolute;
  bottom: 25px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.register-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  animation: overlayFade 0.3s ease;
}

/* 医疗主题注册表单背景美化 */
.register-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(79, 172, 254, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 242, 254, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(103, 237, 213, 0.1) 0%, transparent 50%);
  animation: backgroundPulse 8s ease-in-out infinite;
}

@keyframes backgroundPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* 注册表单容器样式 */
.register-form-container {
  width: 800px;
  max-width: 90vw;
  max-height: 90vh;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 24px;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalSlideIn {
  from {
    transform: scale(0.8) translateY(-50px);
    opacity: 0;
  }

  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* 注册表单内容 */
.register-form {
  padding: 40px;
  position: relative;
  z-index: 10;
}

/* 注册表单头部 */
.register-header {
  text-align: center;
  margin-bottom: 40px;
}

.register-title {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.register-subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
}

/* 注册表单输入区域 */
.register-inputs {
  margin-bottom: 30px;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 25px;
}

/* 注册表单输入组样式 */
.register-form .input-group {
  margin-bottom: 0;
  position: relative;
}

.register-form .input-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #34495e;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.register-form .input-group:focus-within label {
  color: #4facfe;
  transform: translateY(-2px);
}

.register-form .form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 2px solid #e8f4fd;
  border-radius: 12px;
  font-size: 14px;
  background: linear-gradient(135deg, #f8fdff 0%, #f0f9ff 100%);
  transition: all 0.3s ease;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.02),
    0 2px 8px rgba(79, 172, 254, 0.1);
}

.register-form .form-input:focus {
  outline: none;
  border-color: #4facfe;
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(79, 172, 254, 0.15),
    inset 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.register-form .form-input::placeholder {
  color: #95a5a6;
  transition: all 0.3s ease;
}

.register-form .form-input:focus::placeholder {
  color: #bdc3c7;
  transform: translateX(3px);
}

/* 注册协议样式 */
.register-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e8f4fd;
}

.register-agreement input {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  accent-color: #4facfe;
  cursor: pointer;
  transition: all 0.3s ease;
}

.register-agreement input:hover {
  transform: scale(1.1);
}

.register-agreement label {
  font-size: 14px;
  color: #5a6c7d;
  cursor: pointer;
}

/* 注册按钮区域 */
.register-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.cancel-button {
  padding: 12px 32px;
  background: #f8fafc;
  color: #5a6c7d;
  border: 2px solid #e8f4fd;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.cancel-button:hover {
  background: #edf2f7;
  border-color: #d1e3f8;
  color: #4a5568;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.submit-button {
  padding: 12px 32px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

.submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.5s;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

.submit-button:hover::before {
  left: 100%;
}

.submit-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}



/* 注册按钮加载状态 */
.submit-button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.submit-button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .register-form-container {
    width: 95vw;
    margin: 20px;
  }

  .input-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .register-form {
    padding: 30px 20px;
  }

  .register-title {
    font-size: 28px;
  }

  .register-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .cancel-button,
  .submit-button {
    width: 100%;
  }
}

/* 注册表单粒子背景 */
.register-form-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 15% 25%, rgba(79, 172, 254, 0.15) 1px, transparent 2px),
    radial-gradient(circle at 85% 75%, rgba(0, 242, 254, 0.15) 1px, transparent 2px);
  background-size: 50px 50px;
  animation: registerParticles 15s linear infinite;
  z-index: -1;
}

@keyframes registerParticles {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 50px 50px, 50px 50px;
  }
}

@keyframes overlayFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.register-form-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 40px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  transform: scale(0.7);
  opacity: 0;
  animation: slideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 1001;
}

/* 医疗主题注册表单容器背景美化 */
.register-form-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent,
      rgba(79, 172, 254, 0.2),
      transparent,
      rgba(0, 242, 254, 0.2),
      transparent,
      rgba(103, 237, 213, 0.2));
  transform: rotate(45deg);
  animation: shine 6s infinite;
  z-index: -1;
}

@keyframes shine {
  0% {
    left: -50%;
    top: -50%;
  }

  25% {
    left: 0%;
    top: 0%;
  }

  50% {
    left: 50%;
    top: 50%;
  }

  75% {
    left: 100%;
    top: 100%;
  }

  100% {
    left: 150%;
    top: 150%;
  }
}

@keyframes formPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.register-form h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 36px;
  color: #2c3e50;
  position: relative;
  letter-spacing: 1px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.register-form h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 5px;
  background: linear-gradient(to right, #4facfe, #00f2fe, #67edd5);
  margin: 15px auto 0;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

.register-inputs {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.register-inputs .form-input {
  width: 100%;
  height: 55px;
  padding: 0 22px;
  border: 2px solid #e1f5fe;
  border-radius: 14px;
  font-size: 17px;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: #f8fdff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.register-inputs .form-input:focus {
  outline: none;
  border-color: #4facfe;
  box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.25), inset 0 2px 6px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  transform: scale(1.015);
}

.register-inputs .form-input::placeholder {
  color: #888;
  transition: all 0.3s ease;
}

.register-inputs .form-input:focus::placeholder {
  color: #666;
  transform: translateX(8px);
}

.verification {
  display: flex;
  gap: 15px;
}

.verification .form-input {
  flex: 1;
}

.send-code {
  width: 140px;
  height: 50px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.3);
  position: relative;
  overflow: hidden;
  letter-spacing: 1px;
}

.send-code::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.5s;
}

.send-code:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
}

.send-code:hover::before {
  left: 100%;
}

.send-code:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

.register-agreement {
  display: flex;
  align-items: center;
  margin: 30px 0;
}

.register-agreement input {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  accent-color: #4facfe;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.register-agreement input:hover {
  transform: scale(1.1);
}

.register-buttons {
  display: flex;
  gap: 25px;
  margin-top: 30px;
}

.cancel-button,
.submit-button {
  flex: 1;
  height: 55px;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.cancel-button {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #555;
}

.cancel-button:hover {
  background: linear-gradient(135deg, #eef2f7 0%, #b3c1d1 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.cancel-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.submit-button {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #67edd5 100%);
  color: white;
}

.submit-button:hover {
  background: linear-gradient(135deg, #3a9dfc 0%, #00d9e6 50%, #57dcc5 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
}

.submit-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.5s;
}

.submit-button:hover::before {
  left: 100%;
}
</style>